<template>
	<view>
		<!-- 一 -->
		<!-- <view class="state-box">
			<view style="font-weight: 1000;">故障分析</view>
			<view class="pie-box">
       <qiun-data-charts type="column" :chartData1="chartData1" />
      </view>
		</view> -->




		<!-- 二 -->

		<view class="state-box">
			<view style="font-weight: 1000;">维修分析</view>
			<view class="pie-box">
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</view>
		</view>




		<!-- 三 -->
		<view class="state-box">
			<view style="font-weight: 1000;">保养分析</view>
			<view class="charts-box">
				<qiun-data-charts type="rose" :opts="opts3" :chartData="chartData3" />
			</view>
		</view>




		<!-- 四-->
		<view class="state-box">
			<view style="font-weight: 1000;">保养分析</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts4" :chartData="chartData4" />
			</view>
		</view>



		、
		<!-- 五-->
		<view class="state-box">
			<view style="font-weight: 1000;">保养分析</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts5" :chartData="chartData5" />
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getList1,
		getList2,
		// getList3
		// getList4
	} from '@/api/analyse/index.js'
	export default {
		data() {
			return {
				//图一
				// chartData1:{
				//   categories:['2016','2017','2018','2019','2020','2021'],
				//   series:[
				//     {
				//       name:'目标值',
				//       data:[35, 36, 31, 33, 13, 34]
				//     },
				//     {
				//       name:'完成量',
				//       data:[18, 27, 21, 24, 6, 28]
				//     }
				//   ]
				// },




				// 图二
				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。


				opts2: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						show: false,
						name: "1280",
						fontSize: 15,
						color: "rgba(56, 222, 255, 1)"
					},
					subtitle: {
						show: false,
						name: "次数",
						fontSize: 15,
						color: "rgba(32, 37, 64, 1)"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 0,
							offsetAngle: 50,
							labelWidth: 25,
							// border:false,
							borderWidth: 0,
							borderColor: "#FFFFFF",

						}
					}
				},



				// 图三
				chartData3: {},
				opts3: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					legend: {
						show: false,
						position: "left",
						lineHeight: 25
					},
					extra: {
						rose: {
							type: "area",
							minRadius: 40,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 20,
							labelWidth: 22,
							border: false,
							borderWidth: 20,
							borderColor: "#FFFFFF"
						}
					}
				},




				// 图四
				chartData4: {},
				opts4: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 50
					},
					title: {
						name: "收益率",
						fontSize: 15,
						color: "rgba(0,0,0,0)"
					},
					subtitle: {
						show: false,
						name: "70%",
						fontSize: 25,
						color: "rgba(0,0,0,0)"
					},
					extra: {
						ring: {
							ringWidth: 14,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 25,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},




				// 图五
				chartData5: {},
				opts5: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "收益率",
						fontSize: 15,
						color: "rgba(0,0,0,0)"
					},
					subtitle: {
						show: false,
						name: "70%",
						fontSize: 25,
						color: "rgba(0,0,0,0)"
					},
					extra: {
						ring: {
							ringWidth: 40,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 27,
							// border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
				// 五



			};
		},
		mounted() {},
		methods: {


			//图1
			getServerData2() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let res = {
							series: [{
								data: [{
									"name": "一班",
									"value": 50
								}, {
									"name": "二班",
									"value": 30
								}, {
									"name": "三班",
									"value": 20
								}, {
									"name": "四班",
									"value": 18
								}, {
									"name": "五班",
									"value": 8
								}]
							}]
						};
						this.chartData2 = JSON.parse(JSON.stringify(res));
				}, 500);
			},



			//图三
			getServerData3() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
						let res = {
							series: [{
								data: [{
									"name": "一班",
									"value": 50
								}, {
									"name": "二班",
									"value": 30
								}, {
									"name": "三班",
									"value": 20
								}, {
									"name": "四班",
									"value": 18
								}, {
									"name": "五班",
									"value": 8
								}]
							}]
						};
						this.chartData3 = JSON.parse(JSON.stringify(res));
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

				}, 500);
			},
			// 三


			// 图四
			getServerData4() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, {
								"name": "四班",
								"value": 18
							}, {
								"name": "五班",
								"value": 8
							}]
						}]
					};
					this.chartData4 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 四



			// 图五
			getServerData5() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, {
								"name": "四班",
								"value": 18,
								"labelText": "四班:18人"
							}, {
								"name": "五班",
								"value": 8
							}]
						}]
					};
					this.chartData5 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 五
		},
		onReady() {
			this.getServerData2();
			this.getServerData3();
			this.getServerData4();
			this.getServerData5();
		},
	}
</script>

<style lang="scss">
	.pie-box {
		background-image: url('../../static/images/index/yx.png');
		background-size: 150px;
		background-repeat: no-repeat;
		background-position: center;
		// background-color: blue;
	}

	.state-box {
		margin: 32rpx 32rpx 48rpx 32rpx;
		padding: 48rpx 0 32rpx 32rpx;
		// height: 450rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
	}

	.charts-box {
		width: 100%;
		height: 200px;
	}
</style>